<template>
    <div class="login-vue" :style="bg">
        <b-container class="bv-example-row row-box">
            <b-row align-h="center">
                <b-col cols="12" sm="12" md="5" lg="5" class="login-contain">
                    <div class="logo-info">
                        <router-link to="/"><img :src="logo" alt=""></router-link>
                    </div>
                    <div class="login-item">
                        <div class="form-title">
                            <p>找回密码</p>
                        </div>
                        <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
                            <FormItem prop="identifier">
                                <Input v-model="formValidate.identifier" placeholder="请输入注册邮箱" />
                            </FormItem>
                            <FormItem prop="credential">
                                <Input type="password" v-model="formValidate.credential" placeholder="请输入新密码" />
                            </FormItem>
                            <FormItem prop="newCredential">
                                <Input type="password" v-model="formValidate.newCredential" placeholder="请再次确认密码" />
                            </FormItem>
                            <FormItem>
                                <Button type="primary" @click="updateCredential('formValidate')" long>重置密码</Button>
                            </FormItem>
                        </Form>
                        <div class="extra">
                            <p>
                                <router-link to="/login">去登录</router-link>
                            </p>
                        </div>
                    </div>
                </b-col>
            </b-row>
        </b-container>
    </div>
</template>

<script>
export default {
    name: 'forgetPwd',
    data() {
        const validateIdentifier = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('账号不能为空哦'))
            }
            // 模拟异步验证效果（判断邮箱是否存在）
            setTimeout(() => {
                this.$axios({
                    url: 'userLoginAuths/findByIdentifier',
                    method: 'get',
                    params: {
                        identifier: this.formValidate.identifier,
                    },
                }).then(res => {
                    if (res.data.code === 200) {
                        // 邮箱存在保存用户信息
                        this.userLogin = res.data.object
                        callback()
                    } else if (res.data.code === 400) {
                        callback(new Error(res.data.msg))
                    }
                })
            }, 1000)
        }
        const validateCredential = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入新密码'))
            } else {
                if (this.formValidate.newCredential !== '') {
                    // 对第二个密码框单独验证
                    this.$refs.formValidate.validateField('newCredential')
                }
                callback()
            }
        }
        const validateNewCredential = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请再次输入密码'))
            } else if (value !== this.formValidate.credential) {
                callback(new Error('两次密码不匹配'))
            } else {
                callback()
            }
        }

        return {
            logo: require('../assets/imgs/logo2.png'),
            bg: {},
            userLogin: '',
            // 识别标识密码验证
            formValidate: {
                identifier: '',
                credential: '',
                newCredential: '',
            },
            ruleValidate: {
                identifier: [
                    { validator: validateIdentifier, trigger: 'blur' },
                ],
                credential: [
                    { validator: validateCredential, trigger: 'blur' },
                ],
                newCredential: [
                    { validator: validateNewCredential, trigger: 'blur' },
                ],
            },
        }
    },
    created() {
        this.bg.backgroundImage = 'url(' + require('../assets/imgs/bg0' + new Date().getDay() + '.jpg') + ')'
    },
    methods: {
        // 修改密码凭证
        updateCredential(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    this.$axios({
                        url: 'userLoginAuths/updateCredential',
                        method: 'get',
                        params: {
                            ulaUid: this.userLogin.ulaUid,
                            ulaCredential: this.userLogin.ulaCredential,
                        },
                    }).then(res => {
                        console.log(res)
                        if (res.data.code === 200) {
                            // 发送邮件提示用户修改密码成功
                            this.$axios({
                                url: 'userLoginAuths/updateEmail',
                                method: 'get',
                                params: {
                                    email: this.userLogin.ulaIdentifier,
                                },
                            }).then(result => {
                            })
                            // 并跳回登录页面
                            this.$router.push('/login')
                        }
                    })
                }
            })
        },
    },
}
</script>

<style>
.login-item{
    padding: 20px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 30px;
}
.logo-info a{
    display:block;
    text-align: center;
}
.logo-info a img{
    width: 280px;
    height: 80px;
    margin-bottom: 20px;
}
.extra{
    text-align: center;
}
.login-vue {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
}
.form-title {
    text-align: center;
    font-size: 20px;
    color:#333;
}
</style>
